<template>
<view class="con">
	<view :style="{height:getstateheight()+'px'}"></view>
	<view class="titietop" :style="{height:gettitileheight()+'px'}">
		  <view class="iconfont icon-fanhui" @click="back"></view>
		  <view class="seach">
		  	<view class="iconfont icon-sousou"></view>
			<input @confirm="gosearch(1)"  type="text" v-model="seachdata" placeholder="请输入地区"  maxlength="13"/>
			<view class="button" @click="gosearch(1)">搜索</view>
		  </view>
	</view>
</view>
<view class="" :style="{height:getstateheight()+gettitileheight()+'px'}"></view>
<view class="histroy" v-if="!seachdataarray.length && usehistory.history.length">
	   <view class="h-title">
		   <view class="">历史搜索</view>
		   <view class="iconfont icon-shanchu" @click="delethis"></view>
	   </view>
	   <view class="h-his">
		   <view class="" v-for="i in usehistory.history.slice(0,sum)" :key="i" @click="sseach(i)">{{i}}</view>
	   </view>
	    <view class="h-bu"  @click="showgegduo">{{isgengduo?"收起":"显示更多"}}</view>
</view>
<view class="cai"  v-if="!seachdataarray.length">
	<view class="cai-title">猜你需要</view>
	<view class="cai-con">
		<view class="" v-for="i in caidata" :key="i" @click="sseach(i)">{{i}}</view>
	</view>
</view>
<scroll-view v-if="seachdataarray.length" scroll-y="true" class="srollbox" @scrolltolower="bpttomshow">
	<view class="cons">
	      <view class="card"  v-for="(i,index) in seachdataarray" :key="index">
			  <SyCard :data="i"/>
		  </view>
	</view>
	<uni-load-more iconType="snow" :status="currentdata.length==6?`loading`:`no-more`"></uni-load-more>
</scroll-view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app"
	import {ref} from 'vue'
	import {getsearchdata} from '@/api/index.js'
	import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
	import  SyCard from '@/components/syCard/syCard.vue'
	import history from '../../store/history'
	const usehistory=history()
	const scrollheight=getstateheight() + gettitileheight() +'px'
	const data=["浉河区","河南省信阳市浉河区","河南省安阳市殷都区","安阳市","水冶","河南省安阳市殷都区","浉河区","河南省信阳市浉河区","河南省安阳市殷都区","安阳市","水冶","河南省安阳市殷都区"]
	const caidata=["浉河区","河南省信阳市浉河区","河南省安阳市殷都区","安阳市","水冶","河南省安阳市殷都区"]
	const showdata=ref(usehistory.history.slice(0,4))
	const isgengduo=ref(0)
	const seachdata=ref('')
	const seachdataarray=ref([])
	const currentdata=ref([])
	const sum=ref(4)
	onLoad(e=>{
		if(e.isall){
			seachdata.value=e.isall
			gosearch()
		}
	})
	const back=()=>{
		if(seachdataarray.value.length){
			seachdataarray.value=[]
			return
		}
		uni.navigateBack()
	}
	const limit=ref(6)
	const offset=ref(1)
	const delethis=()=>{
		uni.showModal({
			title:"提示",
	        content:"确定要删除历史记录吗？",
			success(e) {
				if(e.confirm){
					usehistory.history=[]
				}
			}
		})
	}
	const bpttomshow=()=>{
		if(currentdata.value.length<6)return
	    offset.value++	
		gosearch()
	}
	const sseach=e=>{
		seachdata.value=e
		gosearch(1)
	}
	const showgegduo=()=>{
		if(!isgengduo.value){
			sum.value=usehistory.history.length
			isgengduo.value=1
			return
		}
		sum.value=4
		isgengduo.value=0
	}
	const gosearch=async(isok=0)=>{
		if(!seachdata.value.trim().length){
			uni.showToast({
				title:"请输入内容哦~",
				icon:"none"
			})
			return
		}
		sum.value=4
		isgengduo.value=0
		usehistory.addhis(seachdata.value)
		if(isok){
			seachdataarray.value=[]
			offset.value=1
		}
		const rudata=await getsearchdata(seachdata.value,limit.value,offset.value)
		seachdataarray.value=[...seachdataarray.value,...rudata.data]
		currentdata.value=rudata.data
		if(!rudata.data.length){
			uni.showToast({
				title:"暂无数据该哦~",
				icon:"none"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.srollbox{
		width: 100%;
		height: calc(100vh -  v-bind(scrollheight));
		padding: 20rpx;
		box-sizing: border-box;
		background-color:#f1f1f1 ;
		.cons{
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2,1fr); 
			gap: 20rpx;
			.card{
				height: 600rpx;
			}
		}
	}
	.con{
	    position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		.titietop{
			display: flex;
			align-items: center;
			width: 100%;
			.icon-fanhui{
				margin: 0 25rpx;
			}
			.seach{
				position: relative;
				height: 80%;
				width: 450rpx;
				border-radius: 15rpx;
				background-color: #f3f3f3;
				font-size: 25rpx;
				.iconfont{
					position: absolute;
					left: 5%;
					top: 50%;
					transform:translateY(-50%);
				}
				input{
					position: absolute;
					top: 50%;
					left: 15%;
					transform:translateY(-50%);
				}
				.button{
					position: absolute;
					right: 0;
					top: 50%;
					width: 100rpx;
					height: 90%;
					background-color: #f57c00;
					transform:translateY(-50%);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 15rpx;
					color: #fff;
				}
			}
		}
	}
	.histroy{
		width: 100%;
		transition: all 2s;
		.h-title{
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 25rpx;
			font-size: 26rpx;
			font-weight: 700;
			.iconfont{
				font-weight: normal;
				color: #7b7b7b;
			}
		}
		.h-his{
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			padding: 25rpx;
			gap: 25rpx;
			color: #333;
			transition: all 2s; 
			>view{
				height: 150rpx;
				background-color: #f3f3f3;
				border-radius: 20rpx;
				font-size: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
			}
		}
		.h-bu{
			width: 100%;
			font-size: 23rpx;
			text-align: center;
			color: #7b7b7b;
		}
	}
    .cai{
		margin-top: 20rpx;
		.cai-title{
			height: 80rpx;
			padding-left: 25rpx;
			font-size: 26rpx;
			font-weight: 700;
		}
		.cai-con{
			padding: 0 30rpx;
			display: flex;
			font-size: 23rpx;
			flex-wrap: wrap;
			gap: 20rpx;
			color: #333;
			>view{
				padding: 10rpx 20rpx;
				font-weight: 700;
				background-color: #f3f3f3;
				border-radius: 10rpx;

			}
		}
	}
</style>
